<template>
    <div>
        <!-- 作业情况 -->
        <el-form :inline="true" size="small" :model="formInline" class="demo-form-inline">
            <el-form-item label="老师姓名">
                <el-input v-model="formInline.userName" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="formInline.phone" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item label="作业名称">
                <el-input v-model="formInline.workName" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item label="开始时间">
                <el-date-picker v-model="formInline.starTime" format="YYYY/MM/DD hh:mm:ss" value-format="x" type="date"
                    placeholder="请选择" clearable />
            </el-form-item>
            <el-form-item label="结束时间">
                <el-date-picker v-model="formInline.endTime" format="YYYY/MM/DD hh:mm:ss" value-format="x" type="date"
                    placeholder="请选择" clearable />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
        </el-form>
        <!-- 表格 -->
        <el-table ref="singleTableRef" tooltip-effect="dark" v-loading="loading" :data="tableData" highlight-current-row
            border stripe align="center" size="small" style="width: 100%">
            <el-table-column type="index" label="序号" align="center" width="80" />
            <el-table-column property="userName" label="学生名字" align="center" />
            <el-table-column property="courseName" label="课程名称" align="center" />
            <el-table-column property="workName" label="作业名称" align="center" />
            <el-table-column property="score" label="分数" align="center" width="70" />
            <el-table-column property="teacherName" label="老师名称" align="center" width="120" />
            <el-table-column property="modifyTime" label=" 提交日期" align="center" width="150">
                <template v-slot="{ row }">
                    <div class="content">
                        {{ formatData(row.modifyTime) }}
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <div class="page">
            <Pagination @getDate="queryCourseList" :queryNum="queryCount" />
        </div>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from "element-plus";

import { getAdminScoreListApi } from "@/api/index";
import Pagination from "@/components/base/MyPagination.vue";

const formInline = reactive({
    userName: "",
    phone: "",
    workName: "",
    starTime: "",
    endTime: "",
})

// 分页用
const queryCount = ref(1);


const onSubmit = () => {
    queryCount.value += 1;
}
const loading = ref(false);
const tableData = ref([
])
// 格式化时间
const formatData = (cellValue) => {
    var s = new Date(cellValue).toLocaleString();
    return s;
};
// 获取数据
const queryCourseList = async (page) => {
    loading.value = true
    const params = {
        pageNum: page.pageNum,
        pageSize: page.pageSize,
    }
    for (const key in formInline) {
        if (formInline[key] != null && formInline[key] !== "" && key !== "time") {
            params[key] = formInline[key];
        } else if (formInline.time && formInline.time.length !== 0) {
            params.startTime = formInline.time[0];
            params.endTime = formInline.time[1];
        }
    }
    const res = await getAdminScoreListApi(params)
    loading.value = false;
    if (res.code !== "10000") {
        ElMessage({
            showClose: true,
            message: res.message,
            type: "error",
        });
        return;
    }
    ElMessage({
        showClose: true,
        message: `查询成功!`,
        type: "success",
    });
    tableData.value = res.data.list || [];
    console.log(res);
    page.totalCount = res.data.totalCount;
}


</script>

<style lang="scss" scoped></style>